<!-- 
 * @Author: 273198238 2412069378@qq.com
 * @Date: 2025-03-15 17:07:58
 * @LastEditors: 273198238 2412069378@qq.com
 * @LastEditTime: 2025-03-19 17:02:22
 * @FilePath: \population\src\components\Centre.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
     <div class="select">
        <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
</el-select>

     </div>
  <el-time-select
    placeholder="起始时间"
    v-model="startTime"
    :picker-options="{
      start: '08:30',
      step: '00:15',
      end: '18:30'
    }">
  </el-time-select>
  <el-time-select
    placeholder="结束时间"
    v-model="endTime"
    :picker-options="{
      start: '08:30',
      step: '00:15',
      end: '18:30',
      minTime: startTime
    }">
  </el-time-select>
    </div>
</template>

<script>
    export default {
    data() {
      return {
         startTime: '',
        endTime: '',
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    }
  }
</script>

<style lang="less" scoped>
:deep(.el-select){
    width: 200px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-top: 20px;
    margin-left: 20px;
    display: inline-block;
    vertical-align: middle;
    .el-input__inner{
        background-color: transparent;
    }
}
:deep(.el-picker-panel){
    background-color: transparent;
    color: #fff;
}
:deep(.el-input__inner){
        background-color: transparent; 
}
// :deep(.el-select-dropdown__item){
//   background-color: #2e94cb; 

// }
</style>